<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
  </head>
  <body>
    <script>
      // 创建3D场景对象Scene
      const scene = new THREE.Scene();

      const width = window.innerWidth;
      const height = window.innerHeight;
      // 实例化一个透视投影相机对象
      const camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);
      //相机在Three.js三维坐标系中的位置
      // 根据需要设置相机位置具体值
      camera.position.set(0, 0,40);

      // 创建渲染器对象Renderer
      const renderer = new THREE.WebGLRenderer();

      // 设置渲染器的尺寸
      renderer.setSize(width, height);
      // 将渲染器中的内容添加到body中
      document.body.appendChild(renderer.domElement);
      //添加立方体
      const geometry = new THREE.BoxGeometry(6, 6, 3);
      // 创建纹理加载器
      const textureLoader = new THREE.TextureLoader();
      // 加载纹理贴图
      textureLoader.load("./assets/wall.jpg", function (texture) {
        // 创建材质
        const lambert = new THREE.MeshLambertMaterial({
          map: texture,
        });
        // 创建一个网格模型对象Mesh
        const mesh = new THREE.Mesh(geometry, lambert);
        mesh.rotation.y = -0.1;
        mesh.position.x = -4;
        scene.add(mesh);
      });
      renderer.setClearColor(0xffffff)
      textureLoader.load("./assets/wall.jpg", function (texture) {
        textureLoader.load("./assets/wall-bump.jpg", function (bump) {
            // 创建材质
            const lambert = new THREE.MeshPhongMaterial({
                map: texture,
                bumpMap: bump,
                bumpScale: 0.2, // 设置凹凸贴图对模型的缩放
            });
            // 创建一个网格模型对象Mesh
            const mesh = new THREE.Mesh(geometry, lambert);
            mesh.rotation.y = -0.5;
            mesh.position.x = 4;
            scene.add(mesh);
            })
      });

      // 点光源
      const spotLight = new THREE.SpotLight(0xffffff);
      //点光源位置
      spotLight.position.set(-10, 10, 190); //点光源放在x轴上
      scene.add(spotLight); //点光源添加到场景中
      const animation = function(){
          // 使用渲染器，通过相机将场景渲染进来
          renderer.render(scene,camera);
          requestAnimationFrame(animation);
      }
      animation();
    </script>
  </body>
</html>
